<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()
const theme = computed(() => appStore.theme)
console.log(theme.value)
// 移除下面这一行错误调用
// appStore.applyThemeToDOM() 
</script>

<style>
/* 使用 CSS 变量，这些变量将在运行时由 JavaScript 动态设置 */
:root {
  --primary-color: #409EFF;
  --bg-color: #f5f7fa;
  --text-color: #303133;
  --sidebar-bg: #304156;
  --sidebar-text: #bfcbd9;
  --header-bg: #ffffff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  min-height: 100vh;
  transition: all 0.3s ease;
}

/* 为不同主题设置过渡效果 */
#app * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
</style>